<template>
    <el-dialog :model-value="props.visible" title="编辑销售单" @close="handleClose">
        <el-form ref="formRef" :model="formData" >
            <el-row>
                <el-col :span="8">
                    <el-form-item label="客户名称">{{ '夏梧桐' }}</el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="日期" props="date">
                        <el-date-picker type="date" v-model="formData.date" placeholder="请选择"  format="YYYY-MM-DD" value-format="YYYY-MM-DD" ></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="发货方式" props="sendMehod">
                        <el-select v-model="formData.sendMehod" placeholder="请选择">
                            <el-option v-for="item in props.send_type" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="备注" props="remark">
                <el-input v-model="formData.remark" placeholder="请输入"></el-input>
            </el-form-item>
        </el-form>
        <el-row :gutter="8">
            <el-col :span="3">
                <el-select v-model="productInfo">
                    <el-option label="成品" value="1"></el-option>
                    <el-option label="样品" value="2"></el-option>
                </el-select>
            </el-col>

            <el-col :span="6">
                <el-select v-model="selectedProduct" filterable value-key="id" placeholder="请选择">
                    <el-option v-for="item in productList" :key="item.id" :label="item.name" :value="item" ></el-option>
                </el-select>
            </el-col>
            <el-col :span="2">
                <el-button plain type="success" @click="handleClickAddProduct">增加</el-button>
            </el-col>
            <el-col :span="2">
                <el-button plain type="warning" @click="handleRemoveProduct" >移除</el-button>
            </el-col>
        </el-row>
        <el-table :data="selectedProducts" ref="tableRef" style="margin-top: 20px" @selection-change="handleSelectionChange">
            <el-table-column type="selection" align="center" width="55" />
            <el-table-column label="品名" prop="name" align="center"></el-table-column>
            <el-table-column label="库存" prop="inventory" align="center"></el-table-column>
            <el-table-column label="箱规" align="center">
                <template #default="scope">
                    <span style="color: red">
                        {{ scope.row.caseGuage }} 
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="箱数" align="center">
                <template #default="scope">
                    <el-input v-model.number="scope.row.caseNumber" type="number"></el-input>
                </template>
            </el-table-column>
            <el-table-column label="总数量" align="center">
                <template #default="scope">
                    <span>{{ Number(scope.row.caseNumber) * Number(scope.row.caseGuage) || 0 }}</span>
                </template>
            </el-table-column>
            <el-table-column label="单价" prop="price"></el-table-column>
            <el-table-column label="总金额" align="center">
                <template #default="scope">
                    <span>{{ Number(scope.row.caseNumber) * Number(scope.row.caseGuage)*Number(scope.row.price) || 0 }}</span>
                </template>
            </el-table-column>
            <el-table-column label="备注" align="center"></el-table-column>
        </el-table>
        <template #footer>
            <div class="dialog-footer">
                <el-button  type="primary" >确 定</el-button>
                <el-button @click="handleClose">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import type { FormInstance,TableInstance } from 'element-plus';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const props = defineProps<{
    visible: boolean,
    send_type: any[]
}>();
const emits = defineEmits(['close','submit']);
const formRef = ref<FormInstance>();
const formData = ref({
    date: undefined,
    sendMehod: undefined,
    remark: undefined
});

const productInfo = ref('1');
const productList = ref<any[]>([
    {
        id: 1,
        name: '麦贝拉A款产品',
        inventory: 1000,
        caseGuage: 10,
        caseNumber: undefined,
        price: 10
    },
    {
        id: 2,
        name: '麦贝拉B款产品',
        inventory: 1000,
        caseGuage: 10,
        caseNumber: undefined,
        price: 8
    },
    {
        id: 3,
        name: '麦贝拉C款产品',
        inventory: 1000,
        caseGuage: 10,
        caseNumber: undefined,
        price: 15
    }
]);
const selectedProduct = ref<any>({});
const selectedProducts = ref<any[]>([]);
const tableRef = ref<TableInstance>();
const selectionIds = ref<any[]>([]);

const handleClickAddProduct = () => {
    if(selectedProduct.value){
        let isExist = false;
        for(let product of selectedProducts.value){
            if(product.id == selectedProduct.value.id){
                isExist = true;
                break;
            };
        };
        if(!isExist){
            selectedProducts.value.push({...selectedProduct.value});
            selectedProduct.value = undefined;
        }else{
            proxy?.$modal.msgError('该产品已添加');
        };
    };
};

const handleSelectionChange = (val: any[]) => {
    selectionIds.value = val.map((item: any)=>item.id);
};

const handleRemoveProduct = () => {
    if(selectedProducts.value.length != 0 && selectionIds.value.length != 0){
        const removeIndex: number[] = [];
        selectedProducts.value.forEach((item: any, index: number)=>{
            if(selectionIds.value.includes(item.id)){
                removeIndex.push(index);
            }
        });
        removeIndex.forEach(item=>{
            selectedProducts.value.splice(item, 1);
        });
    };
};

const handleClose = () => {
    formRef.value?.resetFields();
    selectedProduct.value = undefined;
    selectedProducts.value = [];
    emits('close');
};
</script>

<style scoped>

</style>